import React from "react";
import "./Hotcourse.scss";
import { useEffect, useState } from "react";
import { get_hot_course } from "../../utils/api";
function Hotcourse() {
  const [hotData, setHotData] = useState();
  useEffect(() => {
    async function getHotCourse() {
      let data = await get_hot_course();
      console.log("获取热门教程数据", data);
      setHotData(data);
    }
    getHotCourse();
  }, []);
  return (
    <div className="Hotcourse">
      <div className="top">
        <span>热门教程</span>
        <i>查看更多&gt;</i>
      </div>
      <div className="hot_con">
        {hotData &&
          hotData.slice(0,4).map((item) => (
            <div className="item" key={item.id}>
              <img src={"https://ss.lanqb.com/" + item.posters.mobile} alt="" />
              <h4>{item.title}</h4>
            </div>
          ))}
      </div>
    </div>
  );
}
export default Hotcourse;
